(function () {
    const nknamepic = document.querySelector('.nknamepic');
    const imgpic = document.querySelector('.imgpic');
    axios.get('/api/getinfo', {}).then(function (res) {
        console.log(res);
        let gender;
        nknamepic.src = res.data.imgUrl[0].avater;
        imgpic.src = res.data.imgUrl[0].avater;
        if (res.data.imgUrl[0].gender == 0) {
            res.data.imgUrl[0].gender = '未知';
            gender = res.data.imgUrl[0].gender;
        } else if (res.data.imgUrl[0].gender == 1) {
            res.data.imgUrl[0].gender = '男';
            gender = res.data.imgUrl[0].gender
        } else if (res.data.imgUrl[0].gender == 2) {
            res.data.imgUrl[0].gender = '女';
            gender = res.data.imgUrl[0].gender
        }


        // document.querySelector('.avata_r>img').src = res.data.imgUrl[0].avatar;
        document.querySelectorAll('.pet-name')[0].innerHTML = res.data.imgUrl[0].username;
        document.querySelectorAll('.pet-name')[1].innerHTML = res.data.imgUrl[0].introduce;
        document.querySelectorAll('.pet-name')[2].innerHTML = gender;
        document.querySelectorAll('.pet-name')[3].innerHTML = res.data.imgUrl[0].birthday.split('T')[0];
    }).catch(function (error) {
        console.log(error);
    });


    //设置用户头像
    const avatars = document.querySelector("#avater-h");  //事件源
    // console.log(avatars);
    avatars.addEventListener('change', avatarUploadFn);
    function avatarUploadFn() {
        // let url = '';
        // console.dir(this.files);
        const fr = new FileReader();  //本地图片预览

        const file = this.files[0];  //用户选择的图片
        console.log(file);
        fr.readAsDataURL(file);
        fr.addEventListener('load', function () {
            document.querySelector('.avata_r>img').src = fr.result;
        }, false)
        //需要创建一个表单数据，提交二进制信息
        const formdata = new FormData(); //<form></form>
        formdata.append('avatar', file);//<form><input name="avatar" type="file" value="file" ></form>
        formdata.append('username', 20);
        formdata.append('eid', 20);   //可以往表单里面加
        console.log(formdata);

        axios.post('/api/avaterupload', formdata).then(function (res) {
            console.log(res);
            let url = res.data.data.url;
            document.querySelector('input[name="avatar"]').value = url;
            document.querySelector('#myavater').src = url;
        }).catch(function (error) {
            console.log(error);
        });
    }


    //修改昵称
    let nicknames = document.querySelector(".nickn");
    let settingrow = document.querySelectorAll(".user-profile-change");
    // console.log(settingrow);
    let hide = document.querySelector('.hide');
    let eventbroker = document.querySelectorAll('.eventbroker');
    let petname = document.querySelectorAll('.pet-name');
    // console.log(petname);
    nicknames.addEventListener('click', nicknamefn);
    let nickns = document.querySelector(".nickns");
    let hidee = document.querySelector('.hidee');
    nickns.addEventListener('click', nicknamefns);
    let hideees = document.querySelector('.hideees')
    let form_change_profile = document.querySelector('.form-change-profile')
    // 
    let updatepro = document.querySelector(".updatepro");
    updatepro.addEventListener('click', updateprofn);


    // 昵称
    function nicknamefn() {
        settingrow[0].style.visibility = "visible";
        hide.style.display = "none";
        //事件代理
        eventbroker[0].addEventListener('click', evevtbfn1);
        function evevtbfn1(event) {
            // console.dir(event.target.dataset);
            if (event.target.dataset.custompro == 'save') {
                petname[0].innerText = document.querySelector('.inputvalues').value;
                // console.log(document.querySelector('.inputvalues').value);
                settingrow[0].style.visibility = 'none';
                hide.style.display = 'block';
                // console.log(petname.innerText);
                // 发起请求
                axios.get('/api/nicknameupload', { params: { username: petname[0].innerText } }).then(function (res) {
                    console.log(res);
                    petname[0].innerHTML = res.data.username;

                }).catch(function (error) {
                    console.log(error);
                });
            } else {
                settingrow[0].style.visibility = 'none';
                hide.style.display = 'block';
            }
        }
    }

    // 一句话介绍
    function nicknamefns() {
        console.log(settingrow[1]);
        settingrow[1].style.display = "block";
        hidee.style.display = "none";
        //事件代理
        eventbroker[1].addEventListener('click', evevtbfn2);
        function evevtbfn2(event) {
            // console.dir(event.target.dataset);
            if (event.target.dataset.custompro == 'save') {
                petname[1].innerText = document.querySelector('.sinputvalue').value;
                // console.log(document.querySelector('.inputvalues').value);
                settingrow[1].style.display = 'none';
                hidee.style.display = 'block';
                // console.log(petname.innerText);
                // 发起请求
                axios.get('/api/introduceupload', { params: { introduce: petname[1].innerText } }).then(function (res) {
                    console.log(res);
                    petname[1].innerHTML = res.introduce.data.introduce;
                }).catch(function (error) {
                    console.log(error);
                });
            } else {
                settingrow[1].style.display = 'none';
                hidee.style.display = 'block';
            }
        }
    }


    // 我的资料
    function updateprofn() {
        // console.log(settingrow[2]);
        // settingrow[2].style.display = "block";
        form_change_profile.style.display = "block";
        hideees.style.display = "none";
        let inp1 = document.querySelector('.inp1');
        let inp2 = document.querySelector('.inp2');
        //事件代理  性别判断
        let events = document.querySelector('.events');
        events.addEventListener('click', eventsfn);
        let inp1v;
        function eventsfn(event) {
            console.dir(event.target.dataset);
            if (event.target.dataset.inp == 'inp1') {
                inp1.value = '女';
                inp1v = inp1.value;
            } else if (event.target.dataset.inp == 'inp2') {
                inp2.value = '男';
                inp1v = inp2.value;
            } else {
                inp1v = '未知';
            }
            console.log(inp1v);
        }
        //事件代理
        eventbroker[2].addEventListener('click', evevtbfn3);
        function evevtbfn3(event) {
            console.dir(event.target);
            if (event.target.dataset.custompro == 'save') {
                petname[2].innerText = inp1v;
                petname[3].innerText = document.querySelector('.birthvalue').value;
                form_change_profile.style.display = 'none';
                hideees.style.display = 'block';
                // 发起请求
                axios.get('/api/proupload', { params: { gender: petname[2].innerText, birthday: petname[3].innerText } }).then(function (res) {
                    console.log(res);
                    petname[2].innerText = res.introduce.data.gender;
                    petname[3].innerText = res.introduce.data.birthday;
                }).catch(function (error) {
                    console.log(error);
                });
            } else {
                form_change_profile.style.display = 'none';
                hideees.style.display = 'block';
            }
        }
    }
})();
